<template>
  <div class="app-container">
    <el-form ref="form" :model="form" status-icon :rules="rules" v-loading="loading">
      <el-form-item
        label="上级菜单"
        prop="pid"
        label-width="140px"
      >
        <el-col :span="14">
          <el-cascader
            ref="myCascader"
            v-model="menus"
            placeholder="不选则默认为顶级菜单"
            :props="areaprop"
            :options="options"
            @change="handleChange"
            style="width:300px"
          ></el-cascader>
        </el-col>
      </el-form-item>
      <el-form-item label="类型" label-width="140px">
        <el-radio-group v-model="form.type">
          <el-radio :label="1">菜单</el-radio>
          <el-radio :label="2">按钮</el-radio>
        </el-radio-group> 
      </el-form-item>
      <el-form-item label="中文名称" prop="title" label-width="140px">
        <el-col :span="14">
          <el-input v-model="form.title"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="英文标识" prop="name" label-width="140px">
        <el-col :span="14">
          <el-input v-model="form.name"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="icon图标" prop="icon" label-width="140px" v-if="form.type === 1">
        <el-col :span="14">
          <el-input v-model="form.icon"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="面包屑显示" label-width="140px" v-if="form.type === 1">
        <el-radio-group v-model="form.breadcrumb">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="缓存" label-width="140px" v-if="form.type === 1">
        <el-radio-group v-model="form.noCache">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="tags-view固定" label-width="140px" v-if="form.type === 1">
        <el-radio-group v-model="form.affix">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="显示根路由" label-width="140px" v-if="form.type === 1">
        <el-radio-group v-model="form.alwaysShow">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否隐藏" label-width="140px" v-if="form.type === 1">
        <el-radio-group v-model="form.hidden">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="外链形式" label-width="140px" v-if="form.type === 1">
        <el-radio-group v-model="form.outer_link">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="高亮侧边栏" prop="activeMenu" label-width="140px" v-if="form.type === 1">
        <el-col :span="14">
          <el-input v-model="form.activeMenu"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="组件" prop="component" label-width="140px" v-if="form.type === 1">
        <el-col :span="14">
          <el-input v-model="form.component"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="路由地址" prop="path" label-width="140px" v-if="form.type === 1">
        <el-col :span="14">
          <el-input v-model="form.path"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="外链地址" prop="url" label-width="140px" v-if="form.type === 1">
        <el-col :span="14">
          <el-input v-model="form.url"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="重定向地址" prop="redirect" label-width="140px" v-if="form.type === 1">
        <el-col :span="14">
          <el-input v-model="form.redirect"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="排序" prop="sort" label-width="140px">
        <el-col :span="14">
          <el-input-number :min="0" v-model="form.sort"></el-input-number>
        </el-col>
      </el-form-item>
      <el-form-item label="备注" prop="remark" label-width="140px">
        <el-col :span="14">
          <el-input v-model="form.remark"></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="状态" label-width="140px">
        <el-radio-group v-model="form.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label-width="140px">
        <el-button type="primary" @click="submitForm('form')">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { listMenu, detailMenu, addMenu, editMenu } from "@/api/menu";

const defaultForm = {
  pid: 0,
  type: 1,
  title: "",
  name: "",
  icon: "",
  breadcrumb: 1,
  noCache: 1,
  affix: 0,
  alwaysShow: 1,
  hidden: 0,
  outer_link: 0,
  activeMenu: '',
  component: '',
  path: '',
  url: '',
  redirect: "",
  sort: "",
  remark: "",
  status: 1
};

export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  created() {
    if (this.isEdit) {
      this.getMenuDetail(this.$route.params.id);
    }
  },
  data() {
    // 验证
    const validateRequire = (rule, value, callback) => {
      if (value === "") {
        this.$message({
          message: rule.field + "为必传项",
          type: "error",
        });
        callback(new Error(rule.field + "为必传项"));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      form: Object.assign({}, defaultForm),
      options: [],
      menus: [],
      rules: {
        title: [{ validator: validateRequire }],
        name: [{ validator: validateRequire }],
      },
      areaprop: {
        lazy: true,
        checkStrictly: true,
        lazyLoad(node, resolve) {
          setTimeout(() => {
            if (typeof(node.value) == 'undefined') {
              node.value = 0
            }
            listMenu({ pid: node.value, model: "all" }).then((response) => {
              const menus = response.data.map((value, i) => ({
                value: value.id,
                label: value.title,
                leaf: node.level >= 2,
              }));
              resolve(menus);
            });
          }, 100);
        },
      },
    };
  },
  methods: {
    // 获取选中的上级菜单
    handleChange(value) {
      this.form.pid = value[value.length - 1];
    },
    // 菜单详情
    getMenuDetail(id) {
      detailMenu(id).then((response) => {
        this.form = response.data;
        this.menus = response.data.menus;
      });
    },
    // 验证
    submitForm(form) {
      this.$refs[form].validate((valid) => {
        // 表单校验
        if (!valid) {
          return false;
        }
        // 提交数据
        this.submitData();
      });
    },
    // 提交表单
    async submitData() {
      this.loading = true
      let response = null;
      if (!this.form.id) {
        response = await addMenu(this.form);
      } else {
        if (this.form.pid == this.form.id) {
          this.$message.error("父级分类不能与本分类同级");
        } else {
          response = await editMenu(this.form.id, this.form);
        }
      }
      this.loading = false
      this.$notify({
        title: response.message,
        message: response.message,
        type: response.code == 1 ? "success" : "error",
        duration: 2000,
      });
      this.$router.push("/auth/menu/list");
    },
  },
};
</script>

<style>
</style>